<template>
    <chart :options="config" ref="chart" auto-resize></chart>
</template>

<script>
    import _ from 'lodash'
    import chart from 'vue-echarts'

    //默认配置
    const defaults = {
        title: {
            text: '',
            padding: [10, 30, 20, 20],
            textStyle: {
                fontFamily: 'MicrosoftYaHei',
                fontSize: '16',
                fontWeight: '700',
                color: '#333333',
            }
        },
        legend: {
            orient: 'horizontal',
            x: 'right',
            padding: [10, 30, 20, 0],
            data: []
        },
        color: ['#92E38F', '#5CD28C', '#4DB39D', '#69BADA', '#54A2D0', '#85A7DE', '#B6A7E1', '#ED9996', '#EEE99F', '#EBCE80'],
        xAxis: [],
        yAxis: [],
        grid: {
            x:50,
            x2:50,
            y:50,
            y2:50,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#dbdbdb'
                }
            },
        },
        series: []
    };

    export default {
        name: 'line',
        props: {
            options: {
                type: Object
            },
        },
        computed: {
            config: function () {
                return _.defaultsDeep({}, this.options, defaults);
            },
        },
        methods: {
            //暴露给parent组件用
            refresh: function () {
                this.$refs.chart.resize();
            }
        },
        watch: {

        },
        components: {
            chart
        }
    }
</script>

<style>

</style>
